<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<style lang="css">
    .login {
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background: url("assets/bg.jpg") no-repeat;
        background-size: cover;
    }

    .login_con {
        width: 720px;
        height: 360px;
        background: url(assets/login.jpg) no-repeat;
        background-size: 58%;
        padding-left: 440px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        background-position: 0 80%;
    }

    .login_in {
        width: 240px;
        padding-top: 30%;
        height: 70%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 10px;
    }

    .login_in input {
        border: none;
        outline: none;
        list-style: none;
    }

    .login_in .input_wrap {
        width: 100%;
        height: 30px;
        line-height: 30px;
        margin: 0 0 20px 0;
        padding: 5px;
        border: 1px solid #888;
        border-radius: 2px;
    }

    .login_in label {
        color: #888;
        font-size: 12px;
    }

    .login_in h3{
        width:100%;
        color: #333;
        font-size: 16px;
        font-weight: normal;
        text-align: center;
    }

    .login_in button{
        border: none;
        color: #fff;
        background: cornflowerblue;
        height: 35px;
        line-height: 35px;
        width: 252px;
        border-radius: 4px;
    }
</style>
<body>

        <template id="login">
            <div  class="login">
                <div class="login_con">
                    <div class="login_in">
                        <h3>学生管理系统</h3>
                        <p class="input_wrap">
                            <label>账号：</label>
                            <input v-model="username" placeholder="请输入账号"/>
                        </p>
                        <p class="input_wrap">
                            <label>密码：</label>
                            <input v-model="password" type="password" placeholder="请输入密码" />
                        </p>
                        <button @click="login">登 录</button>
                    </div>
                </div>
            </div>
        </template>

</body>
    <script>
        new Vue({
            el : "#login",
            data : {
                username:"",
                password:""
            },
            methods : {
                //登陆函数
                login(){
                    var t = this;
                    axios.post("/student_manage/login",{"username":t.username,"password":t.password})
                        .then(function(response){
                            //登陆成功，跳转到添加学生页面
                           if(response.data.code === 200){
                               window.location.href="/student_manage/add_student.html";
                           } else  {
                               alert(response.data.msg);
                           }
                        },function(error){})
                }
            }

        })
    </script>
</html>